<script lang="ts" setup>
import type { Column, TableRequest } from '@king-one/antdv'
import { getAppList, getTenantList } from '@/apis/app-manage'
import useValueEnum from '@/hooks/useValueEnum'
import { KProTable, useProTable } from '@king-one/antdv'
import { Button } from 'ant-design-vue'
import AppAdd from './components/AppAdd'
import AppSetting from './components/AppSetting'
import AppUpdate from './components/AppUpdate'
import { app_status_dict, app_type_dict } from './dict'

const appTypeValueEnum = useValueEnum(app_type_dict)
const appStatusValueEnum = useValueEnum(app_status_dict)

const { proTableRef, onRefresh } = useProTable()

const columns = ref<Column[]>([
  {
    title: '商户名称',
    dataIndex: 'tenantId',
    hideInTable: true,
    valueType: 'select',
    request: async () => {
      const res = await getTenantList()
      return res.data.options
    },
  },
  {
    title: '应用ID',
    dataIndex: 'appId',
    width: 150,
    hideInForm: true,
    align: 'center',
  },
  {
    title: '应用名称',
    dataIndex: 'appName',
    align: 'center',
    ellipsis: true,
    width: 200,
  },
  {
    title: '所属租户',
    dataIndex: 'tenantName',
    align: 'center',
    ellipsis: true,
    hideInForm: true,
    width: 200,
  },
  {
    title: '应用类型',
    dataIndex: 'appType',
    key: 'appType',
    align: 'center',
    ellipsis: true,
    hideInForm: true,
    width: 100,
    valueEnum: appTypeValueEnum,
    customRender: ({ text }) => {
      return h('div', null, app_type_dict.find(item => item.value === text)?.label)
    },
  },
  {
    title: '应用状态',
    dataIndex: 'appStatus',
    align: 'center',
    ellipsis: true,
    width: 100,
    valueEnum: appStatusValueEnum,
    customRender: ({ text }) => {
      return h('div', null, app_status_dict.find(item => item.value === text)?.label)
    },
  },
  {
    title: '过期时间',
    dataIndex: 'deadline',
    align: 'center',
    width: 100,
    ellipsis: true,
    hideInForm: true,
  },
  {
    title: '操作',
    dataIndex: 'actions',
    align: 'center',
    hideInForm: true,
    width: 100,
  },
])

const request: TableRequest = async (params) => {
  try {
    const res = await getAppList({ ...params, companyId: params.companyName })
    return {
      data: res.data.list,
      success: true,
      total: res.data.total,
    }
  }
  catch (error) {
    return {
      data: [],
      success: false,
      total: 0,
    }
  }
}

const appAddRef = ref()
const appUpdateRef = ref()
const appSettingRef = ref()

function onAdd() {
  appAddRef.value.open()
}
function onUpdate(row: any) {
  appUpdateRef.value.open(row)
}

async function onAppSetting(row: any) {
  appSettingRef.value.open(row)
}
</script>

<template>
  <div class="w-full h-full  rounded-8px p-10px">
    <KProTable
      ref="proTableRef"
      :columns="columns"
      :antd-table-props="{
        bordered: true,
      }"
      :request="request" :page-size="10"
    >
      <template #toolbar>
        <div class="w-full flex flex-row justify-end">
          <AButton type="primary" ghost @click="onAdd">
            新增
          </AButton>
        </div>
      </template>
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'actions'">
          <a-space class="w-full flex justify-center">
            <Button type="primary" ghost size="small" @click="onUpdate(record)">
              编辑
            </Button>
            <Button type="primary" ghost size="small" @click="onAppSetting(record)">
              应用配置
            </Button>
          </a-space>
        </template>
      </template>
    </KProTable>
    <AppAdd ref="appAddRef" @success="onRefresh" />
    <AppUpdate ref="appUpdateRef" @success="onRefresh" />
    <AppSetting ref="appSettingRef" @success="onRefresh" />
  </div>
</template>
